<template>
  <div class="search-container">
    <el-input
      class="search-input"
      v-model="searchText"
      placeholder="请输入搜索内容"
      clearable
      @clear="handleClear"
      @keyup.enter="handleSearch"
    >
      <template #append>
        <el-button icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>

      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const searchText = ref('');
const emit = defineEmits(['search']);

const handleSearch = () => {
  emit('search', searchText.value);
};

const handleClear = () => {
  searchText.value = '';
  emit('search', '');
};
</script>

<style scoped>
.search-container {
  width: 100%;
  margin-bottom: 20px;
  margin: auto;
  text-align: center;
}

.el-input {
  width: 300px;
}
.search-input{
  width: 50%;
  height: 50px;
}
</style>